<template>
    <p class="typetitle">地址管理</p>
    <el-row>
        <el-col :span="6" :offset="9">
            <el-form :data="userAddress">
                <el-form-item label="地址">
                    <el-input v-model="userAddress.address"></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="userAddress.name"></el-input>
                </el-form-item>
                <el-form-item label="联系方式">
                    <el-input v-model="userAddress.phone"></el-input>
                </el-form-item>
                <el-button @click="commit">提交修改</el-button>
            </el-form>
        </el-col>
    </el-row>

</template>
<script setup>
import api from '@/api/api';
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';
import { useStore } from 'vuex';

const store = useStore();

var userAddress = ref({})

const commit = () => {
    console.log(userAddress);
    api.updateAddress(userAddress)
        .then(ret => {
            if (ret.flag) {
                ElMessage({
                    message: '修改成功',
                    type: 'success'
                })
            }
            else {
                ElMessage({
                    message: '修改失败',
                    type: 'error'
                })
            }
        })
}

const init = () => {
    userAddress = store.getters.userInfo
}

onMounted(init)
</script>
<style scoped>
.typetitle {
    text-align: left;
    margin-left: 10px;
    font-size: 30px;
    color: #E6A23C;
}
</style>
